<template>
<div>
  <el-divider content-position="left">社区风采</el-divider>
  <div style="margin: 10px 0">
    <el-row :gutter="10">
      <el-col :span="6" v-for="item in files" :key="item.id">
        <el-card>
<!--          <img src="../../img/1.jpg" style="width: 100%;height: 100%">-->
          <img :src="item.url" style="width: 100%;height: 100%">
          <div>
            <span>{{item.name}}</span>
          </div>
        </el-card>
      </el-col>
<!--      <el-col :span="6">-->
<!--        <el-card>-->
<!--          <img src="../../img/2.jpg" style="width: 100%;height: 100%">-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>


  </div>


</div>
</template>

<script>
export default {
  name: "FrontHome",
  data(){
    return {
   files:[]
    };
  },
  methods:{

  },
  created(){
    this.request.get("/file").then(res => {
      console.log(res.data)
    this.files=res.data.filter(v => v.type==='png' || v.type==='jpg' || v.type==='jpeg')
    })
  }
}
</script>

<style scoped>

</style>